<template>
  <div>
    <a-button type="primary" :size="size" @click="showModal" v-if="title">{{ title }}</a-button>
    <a-modal
      :title="modalTitle"
      :visible="visible"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
      :footer="null"
    >
      <a-spin :spinning="spinning">
        <a-upload-dragger
          name="file"
          :multiple="false"
          @change="handleChange"
          class="upload"
          :before-upload="beforeUpload"
          :showUploadList="false"
        >
          <p class="ant-upload-drag-icon">
            <a-icon type="inbox" class="upload-icon" />
          </p>
          <a-button type="link" @click.native.stop="downloadHandler" v-if="!uploadConfig.download">点击下载模版</a-button>
          <p class="ant-upload-hint">单击或拖动文件到此区域进行上传</p>
        </a-upload-dragger>
      </a-spin>
    </a-modal>
  </div>
</template>
<style lang="less" scoped>
.upload {
  /deep/.ant-upload {
    height: 245px;
  }
  .upload-icon {
    /deep/svg {
      font-size: 52px;
    }
  }
}
</style>
<script>
import { axios } from '@/utils/request'
import FileSaver from 'file-saver'
export default {
  props: {
    title: {
      type: String,
      default: '导入'
    },
    modalTitle: {
      type: String,
      default: '导入'
    },
    size: {
      type: String,
      default: 'small'
    },
    uploadConfig: {
      type: Object,
      default: () => {
        return {
          download: '', // 下载URL
          uploadUrl: '', // 导入URL
          fileName: '' // 下载模版文件名称
        }
      }
    }
  },
  data () {
    return {
      ModalText: 'Content of the modal',
      visible: false,
      confirmLoading: false,
      spinning: false
    }
  },
  methods: {
    showModal () {
      this.visible = true
    },
    handleChange (info) {
      const { uploadUrl } = this.uploadConfig
      const formData = new FormData()
      formData.append('file', info.file)
      this.spinning = true
      axios({
        url: uploadUrl,
        data: formData,
        method: 'post'
      })
        .then(() => {
          this.spinning = false
          this.$notification.success({
            message: '成功提示',
            description: '导入成功'
          })
          this.handleCancel()
          this.$emit('on-suceess')
        })
        .catch(() => {
          this.spinning = false
        })
    },
    handleOk (e) {
      this.ModalText = 'The modal will be closed after two seconds'
      this.confirmLoading = true
      setTimeout(() => {
        this.visible = false
        this.confirmLoading = false
      }, 2000)
    },
    handleCancel (e) {
      console.log('Clicked cancel button')
      this.visible = false
    },
    downloadHandler () {
      const { download, fileName } = this.uploadConfig
      // axios({ url: download, method: 'get' }).then((data) => {
        try {
          FileSaver.saveAs(download, fileName || '')
          this.$notification.success({
            message: '成功提示',
            description: '下载成功'
          })
        } catch (error) {
          console.log(error)
        }
      // })
    },
    beforeUpload (file) {
      console.log(file, 'file')
      return false
    }
  }
}
</script>
